<template>
	<wsPage :title="$t('shop.ProductList')">
		<div slot="page_operate">
			<Button type="ghost" @click="refresh">
                <Icon type="refresh"></Icon>
                <span>{{$t('index.refresh')}}</span>
            </Button>
		</div>
		<!--统计选项-->
		<Row class="tab-demo">
			<Col span="24">
			<Button :type="queryForm.activeIndex == 0 ? 'primary' : 'ghost'" @click="changeQueryStatus(0,0)">{{$t('shop.allProducts')}}(
                <span class="ws-text-red" v-text="queryForm.stat.s0"></span>)</Button>
			<Button :type="queryForm.activeIndex == 1 ? 'primary' : 'ghost'" @click="changeQueryStatus(1,4)">{{$t('shop.hasAddedTo')}}(
                <span class="ws-text-red" v-text="queryForm.stat.s1"></span>)</Button>
			<Button :type="queryForm.activeIndex == 2 ? 'primary' : 'ghost'" @click="changeQueryStatus(2,3)">{{$t('shop.Waitingforshelves')}}(
                <span class="ws-text-red" v-text="queryForm.stat.s2"></span>)</Button>
			<Button :type="queryForm.activeIndex == 3 ? 'primary' : 'ghost'" @click="changeQueryStatus(3,2)">{{$t('shop.Pendingreview')}}(
                <span class="ws-text-red" v-text="queryForm.stat.s3"></span>)</Button>
			<Button :type="queryForm.activeIndex == 4 ? 'primary' : 'ghost'" @click="changeQueryStatus(4,5)">{{$t('shop.Theauditfailed')}}(
                <span class="ws-text-red" v-text="queryForm.stat.s4"></span>)</Button>
			</Col>
		</Row>
		<wsSmPanel :page="table.page" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="queryForm.model" :label-width="100" inline>
					<FormItem :label="$t('shop.productname')">
						<Input v-model="queryForm.model.name" :placeholder="$t('shop.pleaseEnter')"></Input>
					</FormItem>
					<FormItem :label="$t('shop.Releasetype')">
						<Select clearable v-model="queryForm.model.promotionStatus" :placeholder="$t('shop.pleaseChoose')" class="ws-form-select">
							<Option value="0">{{$t('shop.newest')}}</Option>
							<Option value="1">{{$t('shop.discount')}}</Option>
						</Select>
					</FormItem>
					<FormItem :label="$t('shop.salesType')">
						<Select clearable v-model="queryForm.model.saleType" :placeholder="$t('shop.pleaseChoose')" class="ws-form-select">
							<Option value="1">{{$t('shop.Spot')}}</Option>
							<Option value="2">{{$t('shop.Presale')}}</Option>
						</Select>
					</FormItem>
				</Form>
			</div>
			<div slot="list_operate">
				<Button type="ghost" @click="toAddProductPage">{{$t('shop.addProduct')}}</Button>
			</div>
			<div slot="list_data">
				<ws-table :data="table.data" style="width: 100%">
					<ws-table-column align="center" :label="$t('shop.MainPicture')" width="120" fixed="left">
						<template slot-scope="scope">
							<img :src="scope.row.primaryPicUrl" style="width: 100px;height: 80px;" />
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="name" :label="$t('shop.productname')" min-width="200"></ws-table-column>
					<ws-table-column align="center" prop="brandName" :label="$t('shop.Brand')" min-width="60"></ws-table-column>
					<ws-table-column align="center" :label="$t('shop.Releasetype')" width="120">
						<template slot-scope="scope">
							<Tag v-if="scope.row.promotionStatus == 0" color="blue">{{$t('shop.newest')}}</Tag>
							<Tag v-if="scope.row.promotionStatus == 1" color="green">{{$t('shop.discount')}}</Tag>
						</template>
					</ws-table-column>
					<ws-table-column align="center" :label="$t('shop.salesType')" width="120">
						<template slot-scope="scope">
							<Tag v-if="scope.row.saleType == 1" color="blue">{{$t('shop.Spot')}}</Tag>
							<Tag v-if="scope.row.saleType == 2" color="green">{{$t('shop.Presale')}}</Tag>
						</template>
					</ws-table-column>
					<ws-table-column align="center" :label="$t('shop.status')" width="120">
						<template slot-scope="scope">
							<Tag v-if="scope.row.status == 1">{{$t('shop.add')}}</Tag>
							<Tag v-if="scope.row.status == 2">{{$t('shop.Pendingreview')}}</Tag>
							<Tag v-if="scope.row.status == 3">{{$t('shop.Waitingforshelves')}}</Tag>
							<Tag v-if="scope.row.status == 4">{{$t('shop.hasAddedTo')}}</Tag>
							<Tooltip  v-if="scope.row.status == 5" transfer=true placement="top">
								<Tag color="red">{{$t('shop.ReviewRejection')}}</Tag>
								<div style="white-space: normal"  slot="content">
									<p >{{scope.row.memo}}</p> 
								</div>
							</Tooltip>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="createDate" :label="$t('shop.ReleaseTime')" width="180"></ws-table-column>
					<ws-table-column align="center" :label="$t('shop.skuSettings')" width="180" fixed="right">
						<template slot-scope="scope">
							<div>
								<div style="float: left;text-align: left;">
									<p>{{$t('shop.memberPrice')}}:<span style="color: red;" v-text="scope.row.memberPrice"></span></p>
									<p>{{$t('shop.price')}}:<span style="color: red;" v-text="scope.row.price"></span></p>
									<p>{{$t('shop.stock')}}:<span style="color: red;" v-text="scope.row.stock"></span></p>
								</div>
								<div style="float: left;height: 45px;line-height: 45px;text-align: center;padding-left: 4px;">
									<Button @click="openSkuModal(scope.row)" type="text" size="small">{{$t('shop.edit')}}</Button>
								</div>
							</div>
						</template>	
					</ws-table-column>
					<ws-table-column align="center" width="200" :label="$t('shop.operating')" fixed="right">
						<template slot-scope="scope">
							<Button @click="openMask(scope.row)" type="text" size="small">{{$t('shop.Preview')}}</Button>
							<Button @click="toEditPage(scope.row)" type="text" size="small" v-if="scope.row.status == 1 || scope.row.status == 3 || scope.row.status == 5">{{$t('shop.edit')}}</Button>
							<Button @click="productUp(scope.row)" type="text" size="small" v-if="scope.row.status == 1 || scope.row.status == 3">{{$t('shop.shelf')}}</Button>
							<Button @click="productDown(scope.row)" type="text" size="small" v-if="scope.row.status == 4">{{$t('shop.Obtained')}}</Button>
							<Button @click="toSetKillDate(scope.row)" type="text" size="small" v-if="scope.row.status == 4">{{$t('shop.KillDate')}}</Button>
							<Button @click="delConfirm(scope.row)" type="text" size="small" v-if="scope.row.status == 1 || scope.row.status == 2 || scope.row.status == 3  || scope.row.status == 5">{{$t('shop.delete')}}</Button>
						</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>
		
		<!--商品SKU模态框-->
		<wsModal v-model="skuModal.show" :width="640" :ok-text="$t('shop.save')" :cancelText="$t('shop.cancel')"   :title="$t('shop.editSku')" @on-ok="skuModalSave" @on-cancel="skuModalCancel" >
			<ws-table :data="skuModal.table.datas" ref="skutable">
				<ws-table-column align="center" width="100" :prop="item.key" :label="item.title" v-for="item in skuModal.table.skuColumns"></ws-table-column>
				<ws-table-column align="center" :label="skuModal.table.isNew ? $t('shop.newPrice') : $t('shop.discountPrice')" width="100">
					<template slot-scope="scope">
						<InputNumber @on-blur="priceFormatter(scope.row)" v-model="scope.row.price"></InputNumber>
					</template>
				</ws-table-column>
				<ws-table-column align="center" :label="$t('shop.OriginalPrice')" v-if="!skuModal.table.isNew" width="100">
					<template slot-scope="scope">
						<InputNumber @on-blur="marketPriceFormatter(scope.row)" v-model="scope.row.marketPrice"></InputNumber>
					</template>
				</ws-table-column>
				<ws-table-column align="center" :label="$t('shop.stock')" v-if="skuModal.table.isPresentSale" width="100">
					<template slot-scope="scope">
						<InputNumber :precision="0" v-model="scope.row.stock"></InputNumber>
					</template>
				</ws-table-column>
				<!-- 添加分销价 -->
				<ws-table-column align="center" :label="$t('shop.memberPrice')" width="100">
					<template slot-scope="scope">
						<InputNumber :precision="0" v-model="scope.row.memberPrice"></InputNumber>
					</template>
				</ws-table-column>
				<ws-table-column align="center" :label="$t('shop.Setting')" width="100">
					<template slot-scope="scope">
						<Tooltip :content="$t('shop.settingApplies')" placement="top" transfer>
							<Button type="text" @click="skuSettingToAll(scope.$index)">{{$t('shop.application')}}</Button>
						</Tooltip>
					</template>
				</ws-table-column>
			</ws-table>
		</wsModal>

		
		<wsModal v-model="killModal.show" ok-text="保存" title="设置秒杀时间"  @on-ok="killModalSave"  @on-cancel="killModalCancel">
			<Form ref="modal3Form"  :label-width="100">
		        <FormItem prop="killDate">
		            <DatePicker type="datetime" placeholder="选择秒杀开始时间" style="width: 200px"  v-model="killModal.model.killDate" ></DatePicker> <br>
					<DatePicker type="datetime" placeholder="选择秒杀结束时间" style="width: 200px"  v-model="killModal.model.killEndDate" ></DatePicker>
		        </FormItem>
		    </Form>	
		    
		</wsModal>
		

		<!-- preview start -->
		<div id="preview-mask">
			<div class="x-layer">
				<div class="inner-box">
					<div class="close-btn" @click="closeMask">
						<Icon type="close-round"></Icon>
					</div>
					<!-- A start -->
					<div class="layer-content" id="productDetail" style="overflow: hidden;">
					</div>
					<!-- A end -->
				</div>
			</div>
		</div>
		<!-- preview end -->
	</wsPage>
</template>
<script>
	import Util from "../../../common/util.js";
	import Common from "../../../common/common.js";
	import $ from "jquery";

	export default {
		data() {
			return {
				queryForm: {
					activeIndex: 0,
					model: {
						status: 0, //0.全部 1.已上架 2.待上架 3.待审核 4.审核未通过
						name: "", //商品名称
						promotionStatus: "", //促销状态
						categoryId: "", //商品分类
						saleType: '', //销售类型
						memo: ""
					},
					categoryIds: [], //商品分类
					stat: {
						s0: 0,
						s1: 0,
						s2: 0,
						s3: 0,
						s4: 0
					},
					fields: {
						categorys: []
					}
				},
				table: {
					data: [],
					page: {
						total: 0, //总条数
						pageNum: 1, //当前页
						pageSize: 10 //每页显示条数
					},
					row: null //当前选中
				},
				skuModal: {
					show: false,
					table: {
						isNew: true, //是否为上新,折扣
						isPresentSale: true, //是否为现货，预售
						width: 0,
						skuColumns: [],
						datas: [] //表格数据
					}
				},
				other:{
					currencyType:[
						{
							currencyName:'€',
							currencyCode:'EURO'
						},
						{
							currencyName:'￥',
							currencyCode:'CNY'	
						},
						{							
							currencyName:'$',
							currencyCode:'USD'	
						}
					]
				},
				killModal:{
					show:false,
					model: {
						productId:'',
						killDate: '',
						killEndDate: ''
					}
				}
			};
		},
		computed: {},
		mounted() {
			this.init();
			this.url = Util.previewUrl();
			// 当前选择的语言版本
			let getCurrentLanguage=localStorage.getItem('currentLanguage');
			console.log(getCurrentLanguage);
			// console.log(this.$i18n.messages);
			this.$i18n.locale=getCurrentLanguage;
		},
		methods: {
			refresh() {
				this.queryForm.model = {
					status: 0, //0.全部 1.已上架 2.待上架 3.待审核 4.审核未通过
					name: "", //商品名称
					promotionStatus: "", //促销状态
					categoryId: "" //商品分类
				};
				this.queryForm.activeIndex = 0;
				this.queryForm.categoryIds = [];
				this.init();
			},
			/**
			 * 商品新增页面
			 */
			toAddProductPage() {
				this.$store.dispatch('authHandUpdateMenu', {'router': this.$router, 'curr': {
					name: 'ms_add_product_v2'
				}});
			},
			/**
			 * 跳转到编辑页面
			 */
			toEditPage(row_) {
				//要根据当前的商品类型判断进去的页面
				//1.新增状态可以完全编辑
				//2.已下架或者审核失败的编辑不允许编辑类型
				
				let productId_ = row_.id;
				this.$router.push({
					name: "ms_edit_product_v2",
					query: {
						productId: productId_
					}
				});
			},
			/**
			 * 选中状态
			 */
			changeQueryStatus(activeIndex_, status_) {
				this.queryForm.activeIndex = activeIndex_;
				this.queryForm.model.status = status_;
				this.query();
			},
			init() {
				this.query();
				this.initStat();
			},
			/**
			 * 查询商品信息
			 */
			query() {
				let pageSize = this.table.page.pageSize;
				let pageNum = this.table.page.pageNum;
				let categorys = this.queryForm.categoryIds;
				if(categorys && categorys.length > 0) {
					this.queryForm.model.categoryId = categorys[categorys.length - 1];
				} else {
					this.queryForm.model.categoryId = "";
				}
				const _this = this;
				this.axios
					.get("/ws/v2/ms/product/" + pageSize + "/" + pageNum, {
						params: _this.queryForm.model
					})
					.then(response => {
						var res = response.data;
						var resMeta = res.meta;
						if(0 == resMeta.code) {
							_this.buildPageData(res.data);
						} else {
							_this.$Message.warning(resMeta.message);
						}
					});
			},
			buildPageData(data_) {
				this.table.data = data_.list;
				this.table.page.total = data_.total;		

			},
			//初始化统计信息
			initStat() {
				const _this = this;
				this.axios.get("/ws/v2/ms/product/stat").then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.buildStat(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建商品统计信息
			 * 1新增 2 待审核 3待上架 4已上架  5审核不通过 6作废 
			 * 0.全部 1.已上架 2.待上架 3.待审核 4.审核未通过
			 */
			buildStat(datas_) {
				let s0 = 0;
				let s1 = 0;
				let s2 = 0;
				let s3 = 0;
				let s4 = 0;
				for(let i = 0; i < datas_.length; i++) {
					let data_ = datas_[i];
					let sNum = parseInt(data_.sNum);
					s0 += sNum;
					if(data_.sKey == 4) {
						s1 += sNum;
					} else if(data_.sKey == 3) {
						s2 += sNum;
					} else if(data_.sKey == 2) {
						s3 += sNum;
					} else if(data_.sKey == 5) {
						s4 += sNum;
					}
				}
				this.queryForm.stat = {
					s0: s0,
					s1: s1,
					s2: s2,
					s3: s3,
					s4: s4
				};
			},
			/**
			 * 商品上架
			 */
			productUp(row_) {
				const _this = this;

				if(_this.$i18n.locale=='en'){
					this.$confirm({
						title: "Alert",
						width: 300,
						content: "Check the selected product records?",
						onOk: function() {
							_this.updateStatue(row_, 1);
						}
					});
				}else if(_this.$i18n.locale=='zh'){
					this.$confirm({
						title: "操作提示",
						width: 300,
						content: "你确认上架选中的商品记录吗?",
						onOk: function() {
							_this.updateStatue(row_, 1);
						}
					});
				}else if(_this.$i18n.locale=='it'){
					this.$confirm({
						title: "Operazione richiesta",
						width: 300,
						content: "Sei sicuro di controllare i record del prodotto selezionato?",
						onOk: function() {
							_this.updateStatue(row_, 1);
						}
					});
				}
				
			},
			/**
			 * 商品下架
			 */
			productDown(row_) {
				const _this = this;
				if(_this.$i18n.locale=='en'){
					this.$confirm({
						title: "Alert",
						width: 300,
						content: "Delete the selected product record?",
						onOk: function() {
							_this.updateStatue(row_, 2);
						}
					});
				}else if(_this.$i18n.locale=='zh'){
					this.$confirm({
						title: "操作提示",
						width: 300,
						content: "你确认下架选中的商品记录吗?",
						onOk: function() {
							_this.updateStatue(row_, 2);
						}
					});
				}else if(_this.$i18n.locale=='it'){
					this.$confirm({
						title: "Operazione richiesta",
						width: 300,
						content: "Eliminare il record del prodotto selezionato?",
						onOk: function() {
							_this.updateStatue(row_, 2);
						}
					});
				}
				
			},

			
			/**
			 * 设置秒杀时间
			 */
			toSetKillDate(row_) {
				this.killModal.show = true;
				this.killModal.model.productId = row_.id;
				
				// console.log(row_)
				// const _this = this;
				// this.modal3.model.appCategoryId = row_.id;
				// this.axios.get('/ws/ops/v2/app/category/translates/' + row_.id).then(function(response) {
				// 	let res = response.data;
				// 	if(0 === res.meta.code) {
				// 		_this.buildTranslateData(res.data);
				// 	} else {
				// 		let message_ = res.meta.message;
				// 		_this.$Message.warning('加载翻译内容失败:' + message_);
				// 	}
				// });
			},

			buildTranslateData(data) {
				this.modal3.table.datas = data;
				//目录只处理英文，后面可以直接变成表格形式
				for(let i = 0; i < data.length; i++) {
					let tdata = data[i];
					if(tdata.languageCode == 'en') {
						this.modal3.model.name = tdata.name;
					}else if(tdata.languageCode == 'cht'){
						this.modal3.model.name2 = tdata.name;
					}
					
				}
				this.modal3.show = true;
			},

			/**
			 * 翻译框保存操作
			 */
			killModalSave() {
				
				this.$refs['modal3Form'].validate((valid) => {
					
					if (valid) {
						// debugger
						this.submitModal2();
					} 
				});
			},
			killModalCancel() {
				// this.modal3.model.name = '';
				// this.modal3.model.name2 = '';
				// this.$refs['modal3Form'].resetFields();
				this.killModal.show = false;
			},

			/**
			 * 保存模态框
			 */
			submitModal2() {
				const _this = this;
				console.log(_this.killModal)
				this.axios.get('/ws/v2/ms/product/kill/' + _this.killModal.model.productId + '/' + _this.killModal.model.killDate + '/' + _this.killModal.model.killEndDate ).then(function(response) {
					debugger;
					let res = response.data;
					if(0 === res.meta.code) {
						_this.$Message.success('设置秒杀时间成功');
						_this.killModalCancel();
					} else {
						let message_ = res.meta.message;
						_this.$Message.warning('设置秒杀时间失败:' + message_);
					}
				});				
			},
			/**
			 * 修改商品状态
			 */
			updateStatue(row_, action) {
				const _this = this;
				let postData_ = {
					id: row_.id,
					status: action
				};
				this.axios.put("/ws/v2/ms/product/status", postData_).then(response => {
					// debugger;
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						if(_this.$i18n.locale=='en'){
							_this.$Message.success("Modified product status successfully");
						}else if(_this.$i18n.locale=='zh'){
							_this.$Message.success("修改商品状态成功");
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.success("Stato prodotto modificato correttamente");
						}	

						_this.init();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 删除提示
			 */
			delConfirm(row_) {
				const _this = this;
				if(_this.$i18n.locale=='en'){
					this.$confirm({
						title: "Alert",
						width: 300,
						content: "Delete this product record?",
						onOk: function() {
							_this.delProduct(row_);
						}
					});
				}else if(_this.$i18n.locale=='zh'){
					this.$confirm({
						title: "操作提示",
						width: 300,
						content: "你确认删除本条商品记录吗?",
						onOk: function() {
							_this.delProduct(row_);
						}
					});
				}else if(_this.$i18n.locale=='it'){
					this.$confirm({
						title: "Operazione richiesta",
						width: 300,
						content: "Sei sicuro di cancellare questo record del prodotto?",
						onOk: function() {
							_this.delProduct(row_);
						}
					});
				}
				
			},
			/**
			 * 删除商品
			 */
			delProduct(row_) {
				let rId = row_.id;
				const _this = this;
				this.axios.delete("/ws/v2/ms/product/" + rId).then(function(response) {
					let res = response.data;
					if(0 === res.meta.code) {
						if(_this.$i18n.locale=='en'){
							_this.$Message.success("Delete item record successfully");
						}else if(_this.$i18n.locale=='zh'){
							_this.$Message.success("删除商品记录成功");
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.success("Elimina il record dell'articolo con successo");
						}						
						_this.init();
					} else {
						let message_ = res.meta.message;
						if(_this.$i18n.locale=='en'){
							_this.$Message.warning("Delete item record failed:" + message_);
						}else if(_this.$i18n.locale=='zh'){
							_this.$Message.warning("删除商品记录失败:" + message_);
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.warning("Elimina record articolo fallito:" + message_);
						}
						
					}
				});
			},
			/*预览页面居中*/
			resize() {
				var winHeight = $(window).height();
				if(winHeight < 790) {
					$(".x-layer").css({
						display: "block"
					});
					$(".inner-box").css({
						margin: "50px auto"
					});
				} else {
					$(".x-layer").css({
						display: "flex"
					});
					$(".inner-box").css({
						margin: "auto"
					});
				}
			},
			controlMask(flag, productId, currencyCode, languageCode) {
				var _this = this;				
				if(flag) {
					let html = '<iframe src="https://api.beautystudio.com.cn/h5/#/goods/preview/'+productId+'?language='+languageCode+'&currency='+currencyCode+'" width="355px" height="767px"></iframe>';
					$("#preview-mask .x-layer .layer-content").html(html);
					$("#preview-mask").show();
					$("html").css("fontSize", "26.88px");
					_this.resize();
					$(window).resize(function(event) {
						_this.resize();
					});
				} else {
					$("#preview-mask").hide();
					$("html").css("fontSize", "auto");
				}
			},
			openMask(obj) {
				console.log(obj);
				let productId = obj.id;				
				let languageCode = obj.languageCode;

				// if(obj.currencySymbol=='€'){
				// 	obj.currencyCode='EURO';
				// }else if(obj.currencySymbol=='$'){
				// 	obj.currencyCode='USD';
				// }else if(obj.currencySymbol=='￥'){
				// 	obj.currencyCode='CNY';
				// }

				let currencyCode = obj.code;

				this.controlMask(true, productId, currencyCode, languageCode);
			},
			closeMask() {
				this.controlMask(false);
			},
			/**
			 * SKU模态框保存
			 */
			skuModalSave() {
				//基础校验
				this.updateSku();
			},
			/**
			 * SKU模态框取消
			 */
			skuModalCancel() {
				this.skuModal.show = false;
			},
			/**
			 * 打开SKU模态框
			 */
			openSkuModal(row) {
				this.table.row = row;
				let productId = row.id;
				let _this = this;
				this.axios.get("/ws/v2/ms/product/sku/" + productId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						_this.buildSkuData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建SKU数据模型
			 */
			buildSkuData(data) {
				let specList = data.specList;
				let table = [];
				
				let skuColumns = [];
				
				for(let i = 0; i < specList.length; i++) {
					let spec = specList[i];
					skuColumns.push({
						key: 'item' + i,
						title: spec.name
					});
				}
				
				let skuPropertyList = data.skuPropertyList;
				let skuList = data.skuList;
				
				for(let i = 0; i < skuPropertyList.length; i++) {
					let skuPropertys = skuPropertyList[i];
					
					let itemRow = {};
					for(let j = 0; j < skuPropertys.length; j++) {
						itemRow['item' + j] = skuPropertys[j].propertyValue;
					}
					let sku_ = skuList[i];
					//价格
					itemRow['price'] = sku_.price;
					itemRow['marketPrice'] = sku_.marketPrice;
					itemRow['stock'] = sku_.stock;
					itemRow['memberPrice'] = sku_.memberPrice;
					itemRow['skuId'] = sku_.id;
					table.push(itemRow);
				}
				
				this.skuModal.table.isNew = (0 == data.promotionStatus);
				this.skuModal.table.isPresentSale = (1 == data.saleType);
				let extNum = 2;
				if(0 == data.promotionStatus) {
					extNum++;
				}
				if(1 == data.saleType) {
					extNum++;
				}
				
				let width = (skuPropertyList[0].length + extNum ) * 90;
				this.skuModal.table.width = width;
				this.skuModal.table.skuColumns = skuColumns;
				this.skuModal.table.datas = table;
				this.skuModal.show = true;
			},
			/**
			 * 价格进行格式化
			 */
			priceFormatter(row) {
				row.price = parseFloat(parseFloat(row.price).toFixed(2));
			},
			/**
			 * 市场价格格式化
			 */
			marketPriceFormatter(row) {
				row.marketPrice = parseFloat(parseFloat(row.marketPrice).toFixed(2));
			},
			/**
			 * SKU设置应用到所有
			 */
			skuSettingToAll(index) {
				let dataLength = this.skuModal.table.datas.length;
				if(dataLength < 2) {
					return;
				}
				let current = this.skuModal.table.datas[index];
				for(let i = 0; i < dataLength; i++) {
					this.skuModal.table.datas[i].price = current.price;
					this.skuModal.table.datas[i].marketPrice = current.marketPrice;
					this.skuModal.table.datas[i].stock = current.stock;
				}
			},
			/**
			 * 更新SKU信息
			 */
			updateSku() {
				const _this = this;
				let datas = this.skuModal.table.datas;
				let skus = [];
				for(let i = 0; i < datas.length; i++) {
					let item = datas[i];
					skus.push({
						id: item.skuId,
						price: item.price,
						marketPrice: item.marketPrice,
						stock: item.stock,
						memberPrice : item.memberPrice
					});
				}
				let currRow = this.table.row;
				let postData_ = {
					productId: currRow.id,
					skuV2List: skus
				};
				this.axios.put("/ws/v2/ms/product/sku", postData_).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						if(_this.$i18n.locale=='en'){
							_this.$Message.success("Modify the product inventory successfully");
						}else if(_this.$i18n.locale=='zh'){
							_this.$Message.success("修改商品库存成功");
						}else if(_this.$i18n.locale=='it'){
							_this.$Message.success("Modifica l'inventario del prodotto con successo");
						}						
						_this.skuModalCancel();
						_this.query();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
		}
	};
</script>
<style scoped>
	.tab-demo {
		margin-bottom: 10px;
	}
	
	#preview-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
		overflow: auto;
		display: none;
	}
	
	#preview-mask .x-layer {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	#preview-mask .x-layer .inner-box {
		width: 384px;
		height: 810px;
		position: relative;
		background: url(../../../assets/images/product/iphonex.png) no-repeat;
	}
	
	#preview-mask .x-layer .inner-box .close-btn {
		position: absolute;
		top: -15px;
		right: -15px;
		font-size: 20px;
		text-align: center;
		line-height: 26px;
		width: 30px;
		height: 30px;
		color: #fff;
		border: 1px solid #fff;
		border-radius: 50%;
		cursor: pointer;
	}
	
	#preview-mask .x-layer .inner-box .layer-content {
		position: absolute;
		top: 21px;
		left: 21px;
		width: 338px;
		height: 767px;
		border: 1px solid #999;
		background: #f9f9f9;
		overflow-x: auto;
		border-radius: 40px;
	}
	
	#preview-mask .x-layer .inner-box .detail-more {
		position: absolute;
		top: 21px;
		left: 21px;
		width: 338px;
		height: 767px;
		border: 1px solid #999;
		background: #f9f9f9;
		border-radius: 40px;
	}

</style>
